<template>
  <div>
    <div class="orderFormDiv">
        <el-form ref="orderForm" :rules="rules" :model="orderInfo" label-position="right" label-width="90px">        
            <div><span class="formTitle">订单信息</span></div> 
            <el-divider border-style="dashed" />
            <el-row>
                <el-col :span="24">  
                    <el-form-item label="订单类型" prop="orderType" >
                        <!-- <el-select v-model="orderInfo.orderType" placeholder="订单类型"></el-select> -->
                        <!-- <el-radio-group v-model="orderInfo.orderType" @change="radioChange" size="mini"> -->
                            <el-col :span="4">
                                <el-radio v-model="orderInfo.orderType" :label="1">线上</el-radio>
                            </el-col>
                            <el-col :span="4">
                                <el-radio v-model="orderInfo.orderType" :label="0">线下</el-radio>
                            </el-col>
                        <!-- </el-radio-group> -->
                    </el-form-item> 
                </el-col> 
                <!-- 寄送到门店 -->
                <!-- <el-col :span="7">
                    <el-form-item label="寄送到门店" prop="toStore" >
                        <el-checkbox v-model="orderInfo.toStore" @change="checkboxChange"></el-checkbox>
                    </el-form-item>  
                </el-col> -->
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="寄送" prop="toStore" >
                        <el-radio-group v-model="orderInfo.toStore" @change="checkboxChange" size="mini">
                            <el-col :span="4">                                
                                <el-radio v-model="orderInfo.toStore" :label="false">寄送到顾客</el-radio>
                            </el-col>
                            <el-col :span="4">
                                <el-radio v-model="orderInfo.toStore" :label="true">寄送到门店</el-radio>
                            </el-col>
                        </el-radio-group>                                            
                    </el-form-item>                     
                </el-col>
            </el-row>
            <el-row class="marginBottom30">
                <el-col :span="12">
                    <el-form-item label="面料来源" prop="fabrics" >
                        <el-select v-model="orderInfo.fabrics">
                            <el-option :value="1" label="客供面料"></el-option>
                            <el-option :value="2" label="客户库存"></el-option>
                            <el-option :value="3" label="工厂外采"></el-option>
                            <el-option :value="4" label="工厂库存"></el-option>
                        </el-select>
                    </el-form-item> 
                </el-col>
                <el-col :span="12" v-show="orderInfo.orderType == 1">
                    <el-form-item label="订单编号" prop="orderNo" >
                        <el-input v-model="orderInfo.orderNo" placeholder="订单编号"></el-input>
                    </el-form-item>
                </el-col>                
            </el-row>
            <div><span class="formTitle">物流信息</span></div> 
            <el-divider border-style="dashed" />
            <el-row>
                <el-col :span="12">                
                    <el-form-item label="收件人" prop="contactName" >
                        <el-input v-model="orderInfo.contactName" placeholder="收件人" v-show="orderInfo.toStore == false" class="width90"></el-input>
                        <span v-show="orderInfo.toStore == true">{{orderInfo.contactName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">                
                    <el-form-item label="预计交货期" class="width:40%">
                        <!-- <el-time-picker :editable="false" v-model="orderInfo.deliveryTime" placeholder="预计交货期"></el-time-picker> -->
                        <span>{{orderInfo.deliveryTime}}</span>
                    </el-form-item>   
                </el-col>                
            </el-row>
            <el-row>
                <el-col :span="12">          
                    <el-form-item label="收件手机" prop="contactPhone">
                        <el-input v-model="orderInfo.contactPhone"  placeholder="收件手机" v-show="orderInfo.toStore == false" class="width90"></el-input>
                        <span v-show="orderInfo.toStore == true">{{orderInfo.contactPhone}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="收件邮编" prop="zipCode">
                        <el-input v-model="orderInfo.zipCode"  placeholder="收件邮编" v-show="orderInfo.toStore == false"></el-input>
                        <span v-show="orderInfo.toStore == true">{{orderInfo.zipCode}}</span>
                    </el-form-item> 
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="收件地址" prop="contactAddress">
                        <el-input v-model="orderInfo.contactAddress" placeholder="收件详细地址" v-show="orderInfo.toStore == false"></el-input>
                        <span v-show="orderInfo.toStore == true">{{orderInfo.contactAddress}}</span>
                    </el-form-item>  
                </el-col>          
            </el-row>
            <!-- 第三行 -->
            <el-row class="marginBottom30" v-show="orderInfo.toStore == false">
                <el-col :span="12">
                    <el-form-item label="顾客姓名" prop="userName" >
                        <el-input v-model="orderInfo.userName" placeholder="顾客姓名" class="width90"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="顾客电话" prop="userPhone" >
                        <el-input v-model="orderInfo.userPhone" placeholder="顾客电话"></el-input>
                    </el-form-item>
                </el-col>                
            </el-row>
            <el-row class="marginBottom30" v-show="status == 'update' && orderInfo.updateInfos.length > 0">
                <el-col :span="24">
                    <div><span  class="formTitle">修改履历</span></div> 
                    <el-divider border-style="dashed" />                    
                    <el-table :data="orderInfo.updateInfos">
                        <el-table-column prop="updateDate" label="修改日期">
                        </el-table-column>
                        <el-table-column prop="info" label="修改内容">
                            <template scope="scope">
                                <el-popover
                                    ref="popover"
                                    placement="top-start"
                                  
                                    width="200"
                                    trigger="hover"
                                    :content="scope.row.info">                                                                    
                                </el-popover>
                                <span v-popover:popover>{{scope.row.info}}</span>
                            </template>                          
                        </el-table-column>                        
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="status == 'update' ? 10:24" v-show="orderInfo.orderType == 0">   
                    <div><span  class="formTitle">附件上传</span></div> 
                    <el-divider border-style="dashed" />                       
                    <el-upload 
                    ref="upload"
                    :drag="true"
                    action="#" 
                    :auto-upload = "false" 
                    :show-file-list="false"                
                    :on-change="handlChange"
                    multiple
                    :limit=1
                    class="upLoadDiv"                                 
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload> 
                </el-col>
                <el-col :span="orderInfo.orderType == 0 ? 14:24" v-show="status == 'update'">
                    <div><span  class="formTitle">修改信息</span></div> 
                    <el-divider border-style="dashed" />
                    <el-input type="textarea" v-model="orderInfo.updateInfo"></el-input>
                </el-col>         
            </el-row> 
            <el-row>
                <el-col :span="24" v-show="orderInfo.orderType == 0">
                    <el-table :data="orderInfo.children">
                        <el-table-column prop="fileName" min-width="40%" label="文件名称">
                        </el-table-column>
                        <el-table-column prop="number" min-width="25%" align="center" label="件数">
                            <template scope="scope">                            
                                <el-input-number v-model="scope.row.number" placeholder="请输入订单数量"></el-input-number>                                                             
                            </template>
                        </el-table-column>  
                        <el-table-column min-width="15%" align="center" label="免费" prop="free">
                            <template scope="scope">
                                <el-checkbox v-model="scope.row.free"></el-checkbox>
                            </template>                            
                        </el-table-column>
                        <el-table-column min-width="20%" prop="free" align="right">
                            <template scope="scope">
                                <el-button type="danger" icon="el-icon-delete" size="mini" @click="rowDelete(scope.$index, scope.$fileName)">删除</el-button>
                            </template>                            
                        </el-table-column>                        
                    </el-table>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <div class="footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/index";

export default {
    name:"orderForm",
    props:["orderBaseInfo","inOrderInfo","status"],
    data() {
        return {
        newFile:{number:1},
        orderInfo:{
            contactName:"",
            contactPhone:"",
            contactAddress:"",
            zipCode:"",
            orderType:1,
            deliveryTime:"",
            updateInfo:"",
            orderNo:"",
            toStore:false,
            deliveryTime:formatDate(new Date().getTime() + 6 * 24 * 60 * 60 * 1000, 'yyyy-MM-dd').substr(0,10),
            userName:"",
            userPhone:"",
            children:[],
            updateInfos:[]
        },
        rules:{
            contactName:[{        
                required: true,
                message: "收件人不能为空",
                trigger: "blur"
                }],
            contactPhone:[{        
                required: true,
                message: "收件手机不能为空",
                trigger: "blur"
                },
                {
                //通过正则校验
                pattern:/^1[3|5|7|8|9]\d{9}$/,
                //不通过的提示信息
                message:'请输入正确的手机号'
				}],       
            contactAddress:[{        
                required: true,
                message: "收件地址不能为空",
                trigger: "blur"
                }],  
            zipCode:[{        
                required: true,
                message: "收件邮编不能为空",
                trigger: "blur"
                }],    
            orderNo:[{        
                required: true,
                message: "订单编号不能为空",
                trigger: "blur"
                }], 
            userName:[{        
                required: true,
                message: "顾客姓名不能为空",
                trigger: "blur"
                }],
            userPhone:[{        
                required: true,
                message: "顾客手机不能为空",
                trigger: "blur"
                },
                {
                //通过正则校验
                pattern:/^1[3|5|7|8|9]\d{9}$/,
                //不通过的提示信息
                message:'请输入正确的手机号'
				}], 
            fabrics:[{        
                required: true,
                message: "必须选择面料来源",
                trigger: "blur"
                }],                                                                                  
        },

        }
    },
    watch:{
        inOrderInfo:function(newVal, oldVal) {
            this.orderInfo = this.inOrderInfo
            if (this.orderInfo.toStore == true) {
                this.rules.userName = []
                this.rules.userPhone = []                
            }
            if (this.orderInfo.orderType == 0) {
                this.rules.orderNo = []
            }
        }
    },
    mounted() {
        this.rules.orderNo = [{        
            required: true,
            message: "订单编号不能为空",
            trigger: "blur"
            }]
    },
    methods: {
    //添加文件
    handlChange(file, fileList) {

        this.newFile = {}
        this.newFile.fileName = file.name
        this.newFile.file = file
        this.$set(this.newFile,"number",1)
        this.$set(this.newFile,"free",0)
        this.newFile.id = this.orderBaseInfo.id + "1"        
        //this.newFile.id = this.orderBaseInfo.id + "" + (this.orderInfo.children.length + 1)                
        //this.fileList.push(this.newFile)
        //初次上传文件添加进集合
        if (this.orderInfo.children.length == 0) {
            this.orderInfo.children.push(this.newFile)
        } else {
            this.orderInfo.children.splice(0, 1)
            this.orderInfo.children.push(this.newFile)
        }    
        this.$refs.upload.clearFiles()            
    },
    //行删除
    rowDelete(index, fileName) {       
        this.$modal.confirm('是否确认删除文件?').then(function() {
            return;
        }).then(() => {
            this.orderInfo.children.splice(index, 1)
            this.$modal.msgSuccess("删除成功");
        }).catch(() => {});        
    },
    //取消
    cancel() {
        this.resetForm("orderForm")
        //this.fileList = []
        this.orderInfo.children = []
        this.resetRules() 
        this.$emit("closeDialog")   
        //this.$refs.upload.clearFiles()           
    },
    //确定方法
    confirm() {            
        this.$refs["orderForm"].validate(valid => {
            if (valid) {
                if (this.orderInfo.children.length < 1 && this.orderInfo.orderType == 0) {
                    this.$modal.msgError("请上传至少1个附件。")
                    return;
                }
                this.$set(this.orderInfo,"id",this.orderBaseInfo.id + "")        
                if (this.orderInfo.updateInfo != "" && this.orderInfo.updateInfo != undefined) {
                    let updateInfo = {}
                    updateInfo.updateDate = formatDate(new Date().getTime() + 6 * 24 * 60 * 60 * 1000, 'yyyy-MM-dd')
                    updateInfo.info = this.orderInfo.updateInfo
                    this.orderInfo.updateInfos.push(updateInfo)
                    this.orderInfo.updateInfo = ""
                }
                this.$emit("confrimDialog", this.orderInfo)
                this.$refs.upload.clearFiles()
                //this.fileList = []   
                this.$refs["orderForm"].resetFields();
                this.resetRules()
                }
        })        
    },
    radioChange(value) {
        if (value == 1) {
            this.resetRules(1)
        } else {
            this.rules.orderNo = []
        }
    },
    checkboxChange(value) {
        let haschanged = false
        if ((this.orderInfo.contactName != "" && this.orderInfo.contactName != undefined) ||
            (this.orderInfo.contactPhone != "" && this.orderInfo.contactPhone != undefined) ||
            (this.orderInfo.zipCode != "" && this.orderInfo.zipCode != undefined) ||
            (this.orderInfo.contactAddress != "" && this.orderInfo.contactAddress != undefined)) {
            haschanged = true
        }
        if (value == true) {
            //收件人信息有填写的，提示信息会被清空
            if (haschanged == true) {
                this.$modal.confirm('更改邮寄到门店选项后，您将丢失已在此表单中填写的任何信息。').then(() => {
                    this.orderInfo.contactName = "测试收件人名"
                    this.orderInfo.contactPhone = "13949851234"
                    this.orderInfo.zipCode = "测试邮编"
                    this.orderInfo.contactAddress = "测试收件地址"
                }).catch((e) => {
                    if (e == 'cancel') {
                        this.$set(this.orderInfo,"toStore",false)   
                        return            
                    }
                }); 
            } else {
                this.orderInfo.contactName = "测试收件人名"
                this.orderInfo.contactPhone = "13949851234"
                this.orderInfo.zipCode = "测试邮编"
                this.orderInfo.contactAddress = "测试收件地址"
            }
            //邮寄到门店，取消顾客姓名，顾客电话的check
            this.rules.userName = []
            this.rules.userPhone = []
        } else {
            this.orderInfo.contactName = ""
            this.orderInfo.contactPhone = ""
            this.orderInfo.zipCode = ""
            this.orderInfo.contactAddress = ""
            this.resetRules(2)
        }
    },
    //修改履历点击事件
    rowClick(record, index) {

    },
    //重置输入规则
    resetRules(value) {
        if (value == 1) {
            this.rules.orderNo = [{        
            required: true,
            message: "订单编号不能为空",
            trigger: "blur"
            }]
        } else if (value == 2) {
            this.rules.userName = [{        
                    required: true,
                    message: "顾客姓名不能为空",
                    trigger: "blur"
                    }],
            this.rules.userPhone = [{        
                    required: true,
                    message: "顾客手机不能为空",
                    trigger: "blur"
                    },
                    {
                    //通过正则校验
                    pattern:/^1[3|5|7|8|9]\d{9}$/,
                    //不通过的提示信息
                    message:'请输入正确的手机号'
                    }]
        } else {
            this.rules.orderNo = [{        
            required: true,
            message: "订单编号不能为空",
            trigger: "blur"
            }]
            this.rules.userName = [{        
                required: true,
                message: "顾客姓名不能为空",
                trigger: "blur"
                }],
            this.rules.userPhone = [{        
                required: true,
                message: "顾客手机不能为空",
                trigger: "blur"
                },
                {
                //通过正则校验
                pattern:/^1[3|5|7|8|9]\d{9}$/,
                //不通过的提示信息
                message:'请输入正确的手机号'
				}]
        }
    },
  }
}
</script>

<style>
.orderFormDiv {
    height: 600px;
    overflow: auto;    
    padding: 0px 30px 11px 27px;
}

.orderFormDiv::-webkit-scrollbar {
    width: 3px;
}


.orderFormDiv::-webkit-scrollbar-thumb {
    background: #8798AF;
    border-radius: 2px;
}


.orderFormDiv::-webkit-scrollbar-track {
    background: transparent;
}

.rowInput {
    width: 30%;
}

.formTitle {
    font-size: 16px;
    font-weight: bold;
}

.upLoadDiv {
    margin-bottom: 24px;
    width: 240px;
    height: 120px;

}

.footer {
    padding: 20px;
    padding-top: 10px;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.el-upload-dragger {
    width: 240px;
    height: 120px;
}

.el-upload-dragger .el-icon-upload {
    font-size: 67px;
    color: #C0C4CC;
    margin: 20px 0 16px;
    line-height: 50px;
}

.center {
    text-align: center;
}
.marginBottom30 {
    margin-bottom: 30px;
}

.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 24px;
}

.el-radio-group {
    width:100%;
}

.width90 {
    width:90%;
}
</style>